就像吃藥一定要配溫開水一樣，html一定要配CSS！
(貼心提醒：有些藥如果配溫開水其實是會造成反效果的！可以點進下方報導看一下~ https://today.line.me/tw/v2/article/0P38pD，來學程式還被你學到生活知識，真是賺翻了。)
那先歡迎各位來到第三天，今天我打算從html和css這兩個網頁開發基本工具開始介紹，並帶大家做一個個人簡單的小網頁。
教學資源：
這裡我首推Coursera上密西根大學開的Web Applications for Everybody:
https://www.coursera.org/specializations/web-applications
Dr. Chuck把這些東西都教的很簡單，而且教授本人也滿幽默的，整個課程分為四個部分，但其實每個部分內容都不長，如果跟我一樣拚的話應該是可以在coursera七天免費試用期裡看完的，同時還有作業區可以練習，最後還有結業證書可以拿，唯一缺點應該是有些課沒有中文字幕，但教授講的真的很慢，也沒有什麼高深的單字，我相信學習上不會有太大困難。
所謂HTML就是超文本標記語言(Hyper Text Markup Language)，可以想像成是專門寫給瀏覽器看的語言，而瀏覽器在解讀這些檔案時，就是透過一個一個被Tag(</>)框起來的內容來轉換成我們現在看到的網頁。所以我們接下來要做的事就是知道這些Tag的用法以及什麼時候用該用哪一個Tag，那就讓我們開始吧！
要開始練習首先需要先打開我們昨天介紹到的xampp安裝的資料夾，在打開安裝的資料夾後，找出htdocs這個資料夾，在裡面隨便新增一個新的資料夾，我這裡是取叫30days，之後在這個資料夾中新增一個筆記本檔案，改名為index.html就大功告成啦！
這裡如果你是使用sublime的話，先以sublime打開，從view→syntax中選取html，之後在空白的第一行打html再按tab，這時候應該就會出現基本的html框架了，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
那我們今天的目標是先做出一個個人頁面，通常我們會把內容家在這個標籤裡，所以我先把上面的html擴充成：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>個人網頁</title>
</head>
<body>
<div class="wrapper">
<div class="left">
<img src="./pic/cat.jpg"
alt="user" width="100">
<h4>Sen Chao</h4>
</div>
<div class="right">
<div class="intro">
<h3>個人簡介</h3>
<ul>
<li>
<p>我是阿森，目前就讀臺灣大學工程科學與海洋工程學系大三。<br/>
聽到這裡，你可能會好奇，工程科學乾寫網頁什麼事？嗯......的確是完全沒有關聯！
<strike>那我們30天就到此結束~謝謝各位~~</strike><br/>
沒有啦！正因為我也不是本科出身的，我相信我可以透過更大眾的說法來和各位分享我的所學，
也希望大家可以真正學到一些技能，</br>
並在這30天後有能創作出自己網頁的能力！
</p>
</li>
</ul>
</div>
<div class="info">
<h3>個人資訊</h3>
<div class="info_data">
<div class="data">
<h4>Email</h4>
<p>senchao0930@gmail.com</p>
</div>
<div class="data">
<h4>手機</h4>
<p>09--------</p>
</div>
<div class="data">
<h4>github</h4>
<p>Cooksuhr</p>
</div>
</div>
</div>
<div class="social_media">
<h3>社交媒體</h3>
<ul>
<li><a href="#">Facebook</a></li>
<li><a href="#">Instgram</a></li>
<li><a href="#">My Blog</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
那這裡阿森大致說明一下上面用到的tag吧！
：全名為anchor tag，是用來放一些超連結的tag，在開發的時候可以先用 href="#" 來帶過，等開發近尾聲時再嵌入真正的網址。
接下來需要打開昨天安裝好的xampp control panel，我通常是用左下角的搜尋直接打開。接著把Apache和mysql旁邊的start按下去！應該會長這樣：
再來只需要打開隨便一個瀏覽器，在網址的部分輸入http://localhost/你htdocs裡面的資料夾名/他就會自動導到你剛剛寫好的index.html了！
現在網頁應該還只長這樣：
有沒有發現多了一隻可愛的貓咪，那是透過這個標籤引入的，這也是HTML引入圖片的方法，其語法為這樣：
<img src="./pic/cat.jpg"
alt="user" width="100">
其中
./
代表現在這個html檔案所在的資料夾，pic代表這個資料夾中還有一個pic資料夾
pic/cat.jpg
就是這個pic資料夾中的cat.jpg檔的意思。
那html的部分就到此完成囉。
結束今天的進度後，大家應該都有寫出基本的自我介紹網站的能力了吧！但各位應該也有發現這個網頁不前還有很多不完善的地方，這些地方會用到接下來要介紹的幾個工具，像是php, css等。
明天我們就從最主要的外觀下手吧！也就是今天標題提到的CSS，那今天就到這，明天見！
iThome鐵人賽
看影片追技術